<template>
	<div id="">
		<el-form :inline="true" size="medium">
			<el-form-item>
				<el-button @click="dialogVisible = true">添加类型</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="list" v-loading="loading" stripe>
			<el-table-column label="编号" prop="id" align="center"></el-table-column>
			<el-table-column label="类别名称" prop="name" align="center"></el-table-column>
			<el-table-column label="备注" prop="remark" align="center"></el-table-column>
			<el-table-column label="创建时间" prop="create_time" align="center"></el-table-column>
			<!-- <el-table-column label="创建时间" prop="name" align="center">
				<template slot-scope="scope">
					{{$moment(scope.row.createTime).format('Y-MM-DD HH:mm')}}
				</template>
			</el-table-column> -->
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="text" @click="setData(scope.row)" v-if="scope.row.other_type==1">修改</el-button>
					<el-button type="text" class="error" @click="del(scope.row.id)" v-if="scope.row.other_type==1">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination class="page" background @size-change="handleSizeChange" @current-change="getList" :current-page.sync="params.pageNo"
		 :page-sizes="[10, 20, 50, 100]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>

		<el-dialog title="添加" :visible.sync="dialogVisible" width="400px" center :before-close="handleClose">
			<el-form :model="formData" :rules="rules" ref="formData" label-width="80px">
				<el-form-item label="类别名称" prop="name">
					<el-input v-model="formData.name" placeholder="请输入类别名称"></el-input>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="formData.remark" placeholder="可在此填写备注"></el-input>
				</el-form-item>
			</el-form>
			<div class="align-center">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="write" :loading="formLoading">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					pageNo: 1,
					pageSize: 10,
					isCount: true,
				},
				list: [],
				total: 0,
				loading: false,
				formLoading: false,
				dialogVisible: false,
				formData: {
					name: '',
					remark: '',
				},
				rules: {
					name: {
						message: '请输入类型名称',
						trigger: 'blur',
						required: true
					}
				}
			};
		},

		watch: {},

		create() {},

		mounted() {
			this.getList();
		},

		methods: {
			handleClose(done) {
				this.reset() 
				done()
			},

			handleSizeChange(value) {
				this.params.pageSize = value
				this.search()
			},

			search() {
				this.params.pageNo = 1
				this.params.isCount = true
				this.getList();
			},

			getList() {
				this.loading = true
				this.$request.post({
					url: '/ReportApi/admin/goodTypelist',
					params: this.params,
					success: result => {
						this.list = result[0]
						if (this.params.isCount) {
							this.params.isCount = false
							this.total = result[1]
						}
					},
					finally: () => {
						this.loading = false
					}
				})
			},

			del(id) {
				this.$confirm('确认删除?', '提示').then(() => {
					this.$request.post({
						url: '/ReportApi/admin/goodTypedel',
						params: {
							id
						},
						success: result => {
							this.$message.success('删除成功')
							if (this.params.pageNo > 1 && this.list.length < 2) {
								this.params.pageNo--
							}
							this.getList();
						}
					})
				})
			},
			
			setData(data){
				this.formData.id = data.id 
				this.formData.name = data.name
				this.formData.remark = data.remark 
				this.dialogVisible = true 
			},
			
			write(){
				this.$refs['formData'].validate((valid) => {
					if(valid){
						if(this.formLoading){
						 	return; 
						 }
						this.formLoading = true
						var url = '/ReportApi/admin/' + (this.formData.id ? 'goodTypeupdate' : 'goodTypeadd') 
						this.$request.post({
							url,
							params: this.formData,
							success: result => {
								this.$message.success('添加成功')
								this.dialogVisible = false 
								this.reset() 
								this.search()
							},
							finally: ()=>{
								this.formLoading = false 
							}
						})
					}
				})
			},
			
			reset(){
				this.formData.id = ''
				this.formData.name = ''
				this.formData.address = ''
				this.formData.remark = '' 
			}
			
		},

		beforeDestroy() {}
	}
</script>

<style>

</style>

<style lang="scss" scoped>
	.page {
		text-align: right;
		margin-top: 20px;
	}
</style>
